<template>
  <component :is="iconComponent" v-bind="$attrs" :class="computedClass" />
</template>

<script setup lang="ts">
import {
  SparklesIcon,
  MagnifyingGlassIcon,
  UserIcon,
  ChevronDownIcon,
  XMarkIcon,
  Bars3Icon,
  DocumentTextIcon,
  PhotoIcon,
  ChatBubbleLeftIcon,
  ClockIcon,
  GlobeAsiaAustraliaIcon,
  Cog6ToothIcon,
  SwatchIcon,
  ArrowDownTrayIcon,
  QuestionMarkCircleIcon,
  ComputerDesktopIcon,
  SunIcon,
  MoonIcon,
  FlagIcon,
  BookOpenIcon,
  CircleStackIcon,
  MapIcon,
  HomeIcon,
  EyeIcon,
  CalendarIcon,
  ListBulletIcon,
  Squares2X2Icon,
  TableCellsIcon,
  MapPinIcon,
  AdjustmentsHorizontalIcon,
  FunnelIcon,
  PlusIcon,
  ChevronLeftIcon,
  ChevronRightIcon,
  HeartIcon,
  ChatBubbleOvalLeftIcon,
  ShareIcon,
  EllipsisHorizontalIcon,
  TagIcon,
  LocationMarkerIcon,
  CameraIcon,
  VideoCameraIcon,
  MicrophoneIcon,
  PaperAirplaneIcon,
  FaceSmileIcon,
  GifIcon,
  LinkIcon,
  PaperClipIcon,
  XCircleIcon,
  CheckCircleIcon,
  ExclamationTriangleIcon,
  InformationCircleIcon,
  BellIcon,
  EnvelopeIcon,
  PhoneIcon,
  GlobeAltIcon,
  BuildingOfficeIcon,
  AcademicCapIcon,
  BriefcaseIcon,
  UserGroupIcon,
  StarIcon,
  FireIcon,
  BoltIcon,
  ShieldCheckIcon,
  LockClosedIcon,
  KeyIcon,
  CogIcon,
  WrenchScrewdriverIcon,
  ChartBarIcon,
  PresentationChartLineIcon,
  DocumentChartBarIcon,
  CurrencyDollarIcon,
  CreditCardIcon,
  BanknotesIcon,
  ShoppingCartIcon,
  GiftIcon,
  TrophyIcon,
  RocketLaunchIcon,
  BeakerIcon,
  LightBulbIcon,
  PuzzlePieceIcon,
  CubeIcon,
  CommandLineIcon,
  CodeBracketIcon,
  ServerIcon,
  CloudIcon,
  WifiIcon,
  SignalIcon,
  DevicePhoneMobileIcon,
  ComputerDesktopIcon as DesktopIcon,
  TvIcon,
  SpeakerWaveIcon,
  MusicalNoteIcon,
  PlayIcon,
  PauseIcon,
  StopIcon,
  ForwardIcon,
  BackwardIcon,
  SpeakerXMarkIcon,
  VolumeUpIcon,
  VolumeOffIcon,
  MegaphoneIcon,
  RadioIcon,
  FilmIcon,
  CameraIcon as CamIcon,
  PrinterIcon,
  DocumentIcon,
  FolderIcon,
  ArchiveBoxIcon,
  TrashIcon,
  PencilIcon,
  PencilSquareIcon,
  ClipboardIcon,
  ClipboardDocumentIcon,
  DocumentDuplicateIcon,
  DocumentArrowDownIcon,
  DocumentArrowUpIcon,
  DocumentPlusIcon,
  DocumentMinusIcon,
  FolderPlusIcon,
  FolderMinusIcon,
  FolderOpenIcon,
  InboxIcon,
  InboxArrowDownIcon,
  OutboxIcon,
  PaperClipIcon as AttachmentIcon,
  LinkIcon as ChainIcon,
  QrCodeIcon,
  HashtagIcon,
  AtSymbolIcon,
  CurrencyEuroIcon,
  CurrencyPoundIcon,
  CurrencyYenIcon,
  CalculatorIcon,
  ScaleIcon,
  ClockIcon as TimeIcon,
  CalendarDaysIcon,
  SunIcon as DayIcon,
  MoonIcon as NightIcon,
  CloudSunIcon,
  CloudRainIcon,
  BoltIcon as LightningIcon,
  SnowflakeIcon,
  FireIcon as FlameIcon,
  EyeDropperIcon,
  PaintBrushIcon,
  SwatchIcon as ColorIcon,
  PhotoIcon as ImageIcon,
  RectangleStackIcon,
  Square3Stack3DIcon,
  ViewColumnsIcon,
  Squares2X2Icon as GridIcon,
  ListBulletIcon as ListIcon,
  TableCellsIcon as TableIcon,
  ChartPieIcon,
  ChartBarSquareIcon,
  PresentationChartBarIcon,
  ArrowUpIcon,
  ArrowDownIcon,
  ArrowLeftIcon,
  ArrowRightIcon,
  ArrowUpRightIcon,
  ArrowUpLeftIcon,
  ArrowDownRightIcon,
  ArrowDownLeftIcon,
  ArrowPathIcon,
  ArrowPathRoundedSquareIcon,
  ArrowUturnLeftIcon,
  ArrowUturnRightIcon,
  ArrowUturnUpIcon,
  ArrowUturnDownIcon,
  ArrowsRightLeftIcon,
  ArrowsUpDownIcon,
  ArrowsPointingInIcon,
  ArrowsPointingOutIcon,
  ChevronUpIcon,
  ChevronDownIcon as DownIcon,
  ChevronLeftIcon as LeftIcon,
  ChevronRightIcon as RightIcon,
  ChevronUpDownIcon,
  ChevronDoubleUpIcon,
  ChevronDoubleDownIcon,
  ChevronDoubleLeftIcon,
  ChevronDoubleRightIcon,
  HandRaisedIcon,
  HandThumbUpIcon,
  HandThumbDownIcon,
  FaceSmileIcon as SmileIcon,
  FaceFrownIcon,
  HeartIcon as LoveIcon,
  EyeIcon as ViewIcon,
  EyeSlashIcon,
  NoSymbolIcon,
  ExclamationCircleIcon,
  QuestionMarkCircleIcon as HelpIcon,
  MinusIcon,
  PlusCircleIcon,
  MinusCircleIcon,
  XMarkIcon as CloseIcon,
  CheckIcon,
  XIcon,
} from '@heroicons/vue/24/outline'

interface Props {
  name: string
  class?: string
}

const props = withDefaults(defineProps<Props>(), {
  class: '',
})

// 图标映射
const iconMap: Record<string, any> = {
  // 基础图标
  'heroicons:sparkles': SparklesIcon,
  'heroicons:magnifying-glass': MagnifyingGlassIcon,
  'heroicons:user': UserIcon,
  'heroicons:chevron-down': ChevronDownIcon,
  'heroicons:x-mark': XMarkIcon,
  'heroicons:bars-3': Bars3Icon,
  'heroicons:home': HomeIcon,

  // 内容类型
  'heroicons:document-text': DocumentTextIcon,
  'heroicons:photo': PhotoIcon,
  'heroicons:chat-bubble-left': ChatBubbleLeftIcon,
  'heroicons:clock': ClockIcon,
  'heroicons:globe-asia-australia': GlobeAsiaAustraliaIcon,
  'heroicons:map': MapIcon,
  'heroicons:flag': FlagIcon,
  'heroicons:book-open': BookOpenIcon,

  // 设置和工具
  'heroicons:cog-6-tooth': Cog6ToothIcon,
  'heroicons:swatch': SwatchIcon,
  'heroicons:arrow-down-tray': ArrowDownTrayIcon,
  'heroicons:question-mark-circle': QuestionMarkCircleIcon,

  // 主题相关
  'heroicons:computer-desktop': ComputerDesktopIcon,
  'heroicons:sun': SunIcon,
  'heroicons:moon': MoonIcon,

  // 视图模式
  'heroicons:eye': EyeIcon,
  'heroicons:calendar': CalendarIcon,
  'heroicons:list-bullet': ListBulletIcon,
  'heroicons:squares-2x2': Squares2X2Icon,
  'heroicons:table-cells': TableCellsIcon,
  'heroicons:map-pin': MapPinIcon,

  // 操作
  'heroicons:adjustments-horizontal': AdjustmentsHorizontalIcon,
  'heroicons:funnel': FunnelIcon,
  'heroicons:plus': PlusIcon,
  'heroicons:chevron-left': ChevronLeftIcon,
  'heroicons:chevron-right': ChevronRightIcon,

  // 社交
  'heroicons:heart': HeartIcon,
  'heroicons:chat-bubble-oval-left': ChatBubbleOvalLeftIcon,
  'heroicons:share': ShareIcon,
  'heroicons:ellipsis-horizontal': EllipsisHorizontalIcon,

  // 链接和连接
  'heroicons:link': LinkIcon,

  // 默认
  'heroicons:circle': CircleStackIcon,
}

const iconComponent = computed(() => {
  return iconMap[props.name] || CircleStackIcon
})

const computedClass = computed(() => {
  return props.class
})
</script>
